<template>
  <div class="template-content">
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Sider collapsible :collapsed-width="0" v-model="isCollapsed" :style="{background: '#e0e0e0',width: '400px'}" class="ivu-card ivu-card-bordered">
        <Devicetree ref="deviceTree" @on-playbtnclick="play" @on-select-change="selectChange"/>
      </Sider>
      <Layout :style="{padding: '0 10px 10px'}">
        <Content :style="{padding: '10px', minHeight: '680px', background: '#fff'}">
          <div class="baidumap" id="allmap"></div>
        </Content>
      </Layout>
    </layout>
    <DevicePlayer ref="devicePlayer" ></DevicePlayer>
  </div>
  </div>
</template>
<!--<script src="../../map_load.js"></script>-->
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IfkNE0XDdoaTwdGGkOWrALDkFZOTI9b8"></script>-->
<script>
import {Map} from "../../map/baidumap";
import Devicetree from "_c/topnav/DeviceTree";
import {getMapInfo} from "@/api/mapinfo";
import DevicePlayer from '../Player/DevicePlayer.vue';
import {playStart} from "@/api/Apiproxy";
import {apiResult} from "@/libs/util";
export default {
  name:"dispatch",
  components: {Devicetree,DevicePlayer},
  data() {
    return {
      mapInfo: {
        centerLongitude:114.236262,
        centerLatitude:22.677236,
        minZoom:2,
        maxZoom:20,
        mode: 'ONLINE'
      },
      map:null,
      id: 112,
      isCollapsed:false
    }
  },
  mounted() {
    getMapInfo().then(res => {
        apiResult(res.data,false,result=>{
          this.mapInfo = result.data
        });
    })
    this.createBaiduMap();
  },
  methods:{
    createBaiduMap(){
      //第一种方式引入
      Map().then( BMap => {				//调用map.js中Map()方法，引入百度地图秘钥作为参数
        let that = this;
        that.map = new BMap.Map("allmap",{minZoom:that.mapInfo.minZoom,maxZoom:that.mapInfo.maxZoom});            // 创建Map实例
        let point = new BMap.Point(that.mapInfo.centerLongitude,that.mapInfo.centerLatitude); // 创建点坐标
/*
        var marker=new BMap.Marker(point);
        map.addOverlay(marker);//添加一个标注
*/
        that.map.centerAndZoom(point,13);//添加初始化中心点及地图层级
        that.map.enableScrollWheelZoom();//开启鼠标滚轮缩放功能。仅对PC上有效
        that.map.enableContinuousZoom();//启用连续缩放效果，默认禁用

        that.map.addControl(new BMap.NavigationControl());
        that.map.addControl(new BMap.ScaleControl());
        that.map.addControl(new BMap.OverviewMapControl());
        that.map.addControl(new BMap.MapTypeControl());
        //that.map.setMapStyle({ style: 'midnight' })//地图风格
      })
    },
    selectChange(nodes,data){
      console.log(data);
      let that = this;
      /** 先清队原标注 */
      let allOverlay = that.map.getOverlays();
      for (let i = 0; i < allOverlay.length; i++){
        that.map.removeOverlay(allOverlay[i]);
      };
      let p = new BMap.Point(data.longitude,data.latitude);
      let mkr = new BMap.Marker(p);

      let s = data.title ;
      let label = new BMap.Label(s, {offset: new BMap.Size(20, -10)});
      mkr.setLabel(label);
      that.map.addOverlay(mkr);

      /** */
      let opts = {
        width : 100,     // 信息窗口宽度
        height: 100    // 信息窗口高度
      }
      let online="离线";
      if ("1"==data.online){online="在线";}
      let sContent = '弹窗';
      sContent = "<div style='width:100%; height: 100%;'>" +
        "<ul style='padding-top:10px;'>"+
        "<li>设备名：" + data.title + "</li>"+
        "<li>设备编号："+ data.arrt.code + "</li>"+
        "<li>经纬度：" + data.longitude+ " , " + data.latitude + "</li>" +
        "<li>状态：" + online + "</li>" +
        "</ul>" +
        "</div>";

      let infoWindow = new BMap.InfoWindow(sContent,opts);  // 创建信息窗口对象
      mkr.openInfoWindow(infoWindow);

      /** 点击事件 */
      mkr.addEventListener("click",function(e){
        let opts = {
          width : 100,     // 信息窗口宽度
          height: 100    // 信息窗口高度
        }
        let sContent = '弹窗';
        sContent = "<div style='width:100%; height: 100%;'>" +
          "<ul style='padding-top:10px;'>"+
          "<li>设备名：" + data.title + "</li>"+
          "<li>设备编号："+ data.arrt.code + "</li>"+
          "<li>经纬度：" + data.longitude+ " , " + data.latitude + "</li>" +
          "</ul>" +
          "</div>";

        let infoWindow = new BMap.InfoWindow(sContent,opts);  // 创建信息窗口对象
        //this.map.openInfoWindow(infoWindow);
        this.openInfoWindow(infoWindow);

      });

    },
    play(node,data){
      let serverId=data.arrt.gbServerId;
      let deviceId=data.arrt.code;
      let channelId=data.arrt.channel;
      console.log("通知设备推流：" + deviceId + " : " + channelId);

      playStart(serverId,deviceId,channelId).then(res=>{
        apiResult(res.data,false,result=>{
          this.$refs.devicePlayer.openDialog("media",serverId,deviceId,channelId, {
            streamInfo: result.data,
            hasAudio: false,
          });
        })
      })
    },
  }
}
</script>
<!--<style scoped>-->
<style lang="less">
@import ".././template";
.layout-con{
  height: 100%;
  width: 100%;
}
.ivu-layout-sider-trigger {
  position: fixed;
  bottom: 0;
  text-align: center;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  color: #252525;
  background: #f3f3f3;
  z-index: 1000;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.ivu-tree-title {
  display: inline-block;
  margin: 0;
  padding: 0 4px;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: top;
  color: #45f803;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.top_nav_01{
  z-index: 999999999;
}
.baidumap {
  width: 100%;
  height: 100%;
  border: none;
  position: inherit;
  left:0px;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #2d8cf0;
  overflow: hidden;
  z-index: 0;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
</style>

